'use client';

import React, { useState } from 'react';
import { Form, Input, Select, Row, Col, Card, Button, Typography } from 'antd';
import { FormInstance } from 'antd/es/form';

const { Option } = Select;
const { Text } = Typography;

// 快递公司选项
const expressOptions = [
  { label: '顺丰快递', value: 'shunfeng' },
  { label: '圆通快递', value: 'yuantong' },
  { label: '中通快递', value: 'zhongtong' },
  { label: '申通快递', value: 'shentong' },
  { label: '韵达快递', value: 'yunda' },
  { label: '邮政EMS', value: 'ems' },
];

interface SampleShippingFormProps {
  form: FormInstance;
  mode: 'create' | 'edit' | 'view';
  initialValues?: Record<string, unknown>;
  onSubmit?: (values: Record<string, unknown>) => void;
}

const SampleShippingForm: React.FC<SampleShippingFormProps> = ({ 
  form, 
  mode, 
  initialValues = {},
  onSubmit 
}) => {
  const isReadOnly = mode === 'view';
  const [needReturn, setNeedReturn] = useState(true); // 是否需要寄回

  // 切换是否需要寄回
  const handleReturnToggle = () => {
    setNeedReturn(!needReturn);
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={onSubmit}
      initialValues={{
        // 实验室收件地址（固定）
        labRecipient: '李老师',
        labPhone: '18812341234',
        labAddress: 'xx省xx市xx区xx街道',
        
        // 用户收件地址（可修改）
        userRecipient: '李老师',
        userPhone: '18812341234',
        userAddress: 'xx省xx市xx区xx街道',
        
        // 快递信息
        outboundExpress: 'shunfeng',
        outboundTrackingNumber: 'xxxxxxxxxxxxxxxxxxxx',
        returnExpress: '',
        returnTrackingNumber: '',
        
        ...initialValues
      }}
      disabled={isReadOnly}
    >
      {/* 实验室收件地址 */}
      <Card title="实验室收件地址" size="small" style={{ marginBottom: 16 }}>
        <Row gutter={16}>
          <Col span={8}>
            <Form.Item
              label="收件人"
              name="labRecipient"
            >
              <Input readOnly />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="收件电话"
              name="labPhone"
            >
              <Input readOnly />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="详细地址"
              name="labAddress"
            >
              <Input readOnly />
            </Form.Item>
          </Col>
        </Row>
      </Card>

      {/* 用户收件地址 */}
      <Card 
        title={
          <div>
            <span>用户收件地址</span>
            <Text type="secondary" style={{ marginLeft: 8, fontSize: '12px' }}>
              可在个人中心-用户信息-收货地址中修改
            </Text>
          </div>
        } 
        size="small" 
        style={{ marginBottom: 16 }}
      >
        <Row gutter={16}>
          <Col span={8}>
            <Form.Item
              label="收件人"
              name="userRecipient"
            >
              <Input disabled={isReadOnly} />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="收件电话"
              name="userPhone"
            >
              <Input disabled={isReadOnly} />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="详细地址"
              name="userAddress"
            >
              <Input disabled={isReadOnly} />
            </Form.Item>
          </Col>
        </Row>
      </Card>

      <Row gutter={24}>
        {/* 样品寄出 */}
        <Col span={12}>
          <Card title="样品寄出" size="small">
            <Form.Item
              label="快递"
              name="outboundExpress"
              rules={[{ required: !isReadOnly, message: '请选择快递公司' }]}
            >
              <Select placeholder="顺丰快递" disabled={isReadOnly}>
                {expressOptions.map(option => (
                  <Option key={option.value} value={option.value}>
                    {option.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            
            <Form.Item
              label="快递单号"
              name="outboundTrackingNumber"
              rules={[{ required: !isReadOnly, message: '请输入快递单号' }]}
            >
              <Input 
                placeholder="xxxxxxxxxxxxxxxxxxxx" 
                disabled={isReadOnly}
              />
            </Form.Item>
            
            <Button 
              type="link" 
              style={{ padding: 0, color: '#1890ff' }}
              disabled={isReadOnly}
            >
              点击查看物流详情
            </Button>
          </Card>
        </Col>

        {/* 样品寄回 */}
        <Col span={12}>
          <Card 
            title={
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>样品寄回</span>
                {!isReadOnly && (
                  <Button 
                    type="link" 
                    size="small"
                    onClick={handleReturnToggle}
                  >
                    {needReturn ? '设为不需要寄回' : '设为需要寄回'}
                  </Button>
                )}
              </div>
            }
            size="small"
          >
            {needReturn ? (
              <>
                <Form.Item
                  label="快递"
                  name="returnExpress"
                >
                  <Select placeholder="请选择" disabled={isReadOnly}>
                    {expressOptions.map(option => (
                      <Option key={option.value} value={option.value}>
                        {option.label}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                
                <Form.Item
                  label="快递单号"
                  name="returnTrackingNumber"
                >
                  <Input 
                    placeholder="请输入" 
                    disabled={isReadOnly}
                  />
                  <Button 
                    type="primary" 
                    size="small" 
                    style={{ marginTop: 8 }}
                    disabled={isReadOnly}
                  >
                    确定
                  </Button>
                </Form.Item>
                
                <Button 
                  type="link" 
                  style={{ padding: 0, color: '#1890ff' }}
                  disabled={isReadOnly}
                >
                  点击查看物流详情
                </Button>
              </>
            ) : (
              <div style={{ textAlign: 'center', padding: '40px 0', color: '#999' }}>
                <Text type="secondary">样品不需要寄回</Text>
              </div>
            )}
          </Card>
        </Col>
      </Row>

      {/* 操作按钮区域 */}
      {!isReadOnly && (
        <div style={{ textAlign: 'center', marginTop: 24 }}>
          <Button type="primary">
            取消
          </Button>
        </div>
      )}
    </Form>
  );
};

export default SampleShippingForm; 